import {
  AlipayCircleOutlined,
  LockOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  WeiboCircleOutlined,
} from '@ant-design/icons';
import {
  LoginForm,
  ProFormText,
} from '@ant-design/pro-components';
import { FormattedMessage, SelectLang, connect, history } from 'umi';
import type { ConnectRC, AuthModelState } from 'umi';
import styles from './index.less';

const IndexPage: ConnectRC<AuthModelState> = (props) => {
    const { dispatch } = props;

    const onFinish = (values: any) => {
        dispatch({
          type: 'authModel/login',
          payload: {
            ...values,
          },
        });
        history.push('/')
    };

    return (
        <div className={styles.container}>
        <div className={styles.lang} data-lang>
            {SelectLang && <SelectLang />}
        </div>
        <div className={styles.content}>
            <LoginForm
            title="Ant Design"
            initialValues={{
                autoLogin: true,
            }}
            actions={[
                <FormattedMessage
                key="loginWith"
                id="pages.login.loginWith"
                defaultMessage="其他登录方式"
                />,
                <AlipayCircleOutlined key="AlipayCircleOutlined" className={styles.icon} />,
                <TaobaoCircleOutlined key="TaobaoCircleOutlined" className={styles.icon} />,
                <WeiboCircleOutlined key="WeiboCircleOutlined" className={styles.icon} />,
            ]}
            onFinish={async (values) => {
                onFinish(values)
              }}
            >
                <>
                <ProFormText
                    name="username"
                    fieldProps={{
                    size: 'large',
                    prefix: <UserOutlined className={styles.prefixIcon} />,
                    }}
                    placeholder='请输入用户名'
                    rules={[
                    {
                        required: true,
                        message: (
                        <FormattedMessage
                            id="pages.login.username.required"
                            defaultMessage="请输入用户名!"
                        />
                        ),
                    },
                    ]}
                />
                <ProFormText.Password
                    name="password"
                    fieldProps={{
                    size: 'large',
                    prefix: <LockOutlined className={styles.prefixIcon} />,
                    }}
                    placeholder='请输入密码'
                    rules={[
                    {
                        required: true,
                        message: (
                        <FormattedMessage
                            id="pages.login.password.required"
                            defaultMessage="请输入密码！"
                        />
                        ),
                    },
                    ]}
                />
                </>
            </LoginForm>
        </div>
        </div>
    );
};

export default connect(({ authModel }: { authModel: AuthModelState }) => ({
    authModel,
  }))(IndexPage);
